<template>
  <!-- 督导 -->
  <div id="app">
    <!-- <div class="header">
      <van-icon color="#fff" name="user-circle-o"></van-icon>
      <div>报表</div>
    </div> -->
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="image in swipeImages" :key="image">
        <img :src="image" @click="showPreview" />
      </van-swipe-item>
    </van-swipe> -->
    <Transition name="bounce">
      <div class="showAdvertising" v-if="advertisingStore.showAdvertising">
        <!-- <div class="countDown">{{ codeText }}</div> -->
        <img :src="advertising" alt="" />
      </div>
    </Transition>
    <div v-if="!advertisingStore.showAdvertising">
      <div class="title">客户经理报表</div>
      <van-grid :column-num="3" clickable>
        <!-- <van-grid-item @click="toNext('/admin_managerSatement')">
        <van-icon name="friends-o" size="36" color="#C42718" />
        <p>以客户经理为单位</p>
      </van-grid-item>
      <van-grid-item v-if="role == 1" @click="toNext('/admin_managerSatementDept')">
        <van-icon name="hotel-o" size="36" color="#f8c622" />
        <p>以机构为单位</p>
      </van-grid-item> -->
        <van-grid-item @click="toNext('/saleManagerReport3')">
          <van-icon name="bar-chart-o" size="36" color="#C42718" />
          <p>客户经理填写报表</p>
        </van-grid-item>
      </van-grid>
      <div class="title">营业部经理报表</div>
      <van-grid :column-num="3" clickable>
        <!-- <van-grid-item @click="toNext('/admin_saleManagerStatement')">
        <van-icon name="user-o" size="36" color="#C42718" />
        <p>以营业部经理为单位</p>
      </van-grid-item>
      <van-grid-item v-if="role == 1" @click="toNext('/admin_saleManagerStatementDept')">
        <van-icon name="shop-o" size="36" color="#00a79d" />
        <p>以机构单位</p>
      </van-grid-item> -->
        <van-grid-item @click="toNext('/deptManagerReport3')">
          <van-icon name="completed" size="36" color="#f8c622" />
          <p>营业部经理填写报表</p>
        </van-grid-item>
      </van-grid>
      <div class="title">总监报表</div>
      <van-grid :column-num="3" clickable>
        <!-- <van-grid-item @click="toNext('/admin_directorStatement')">
        <van-icon name="user-o" size="36" color="#C42718" />
        <p>以总监为单位</p>
      </van-grid-item> -->
        <van-grid-item @click="toNext('/directorsReport3')">
          <van-icon name="column" size="36" color="#00a79d" />
          <p>总监填写报表</p>
        </van-grid-item>
      </van-grid>
      <div class="title">上周榜单</div>
      <van-grid :column-num="3" clickable>
        <van-grid-item @click="toNext('/saleManagerTutoringTop')">
          <van-icon name="award" size="36" color="#C42718" />
          <p>客户经理一日三辅导</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/saleManagerPreserveTop')">
          <van-icon name="award" size="36" color="#f8c622" />
          <p>客户经理一周一维护</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/saleManagerTrainingTop')">
          <van-icon name="award" size="36" color="#C42718" />
          <p>客户经理一周一外训</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/deptManagerTutoringTop')">
          <van-icon name="award" size="36" color="#00a79d" />
          <p>营业部经理一日三走访</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/deptManagerSalonTop')">
          <van-icon name="award" size="36" color="#C42718" />
          <p>营业部经理一周一微沙</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/deptManagerLargeorderTop')">
          <van-icon name="award" size="36" color="#7766D1" />
          <p>营业部经理一周一大单</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/directorsTutoringTop')">
          <van-icon name="award" size="36" color="#3762FB" />
          <p>总监一日三走访</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/directorsPreserveTop')">
          <van-icon name="award" size="36" color="#f8c622" />
          <p>总监一周一维护</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/directorsMonthprojectTop')">
          <van-icon name="award" size="36" color="#00a79d" />
          <p>总监一月一项目</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getcarouselMapApi } from '@/request/api.js'
import { useCountDown } from '@vant/use'

const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { isIOS, parseTime, handleFontSize } from '@/utils'
import advertising from '@imgs/dd.jpg'
const agentcode = ref('')
const role = ref('')
const swipeImages = ref([])
import { useAdvertisingStore } from '@/stores/stores'
const advertisingStore = useAdvertisingStore()
onMounted(() => {
  if (advertisingStore.showAdvertising) {
    countDown.start()
  }
  agentcode.value = route.query.agentCode
  role.value = route.query.role //role=1分公司督训    role=2中支督训
  // getCarouselMap()
})

// 倒计时方法
const codeText = ref('')
const countDown = useCountDown({
  time: 2 * 1000,
  onFinish: () => {
    countDown.reset()
    advertisingStore.showAdvertising = false
  },
  onChange: (value) => {
    codeText.value = value.seconds
  }
})

function getCarouselMap() {
  getcarouselMapApi().then((res) => {
    console.log(res)
    swipeImages.value = res.data
  })
}
function toNext(href) {
  router.push({
    path: href,
    query: {
      agentcode: agentcode.value,
      role: role.value
    }
  })
}
// function showPreview() {
//   showImagePreview({
//     images: swipeImages.value,
//     closeable: true
//   })
// }
</script>

<style lang="less" scoped>
@import '@css/agentIndex.less';
</style>
